<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body bgcolor="#fff">
    <div>
      <div><canvas id="c" width="600" height="600"></canvas></div>
      <div>
        <div>
          <span style="margin-right: 15px">
            <span>Line cap</span>
            <select id="cap">
              <option value="butt">butt</option>
              <option value="square">square</option>
              <option value="round">round</option>
            </select>
          </span>
          <span style="margin-right: 15px">
            <span>Line join</span>
            <select id="join">
              <option value="bevel">bevel</option>
              <option value="miter">miter</option>
              <option value="round" selected="">round</option>
            </select>
          </span>
          <span style="margin-right: 15px">
            <span>Miter limit</span>
            <select id="miter">
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10" selected="">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
            </select>
          </span>
        </div>
        <div>
          <span style="margin-right: 15px">
            <span>Show lines</span>
            <input type="checkbox" checked="" id="lines" />
          </span>
          <span style="margin-right: 15px">
            <span>Draw with canvas</span>
            <input type="checkbox" checked="" id="canvas" />
          </span>
        </div>
      </div>
    </div>

    <script src="./line.js"></script>
  </body>
</html>
